<template>
  <div>

    <!--搜索表单-->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="搜索信息">
        <el-input v-model="searchForm.keywordOrNameOrLink" placeholder="搜索信息"></el-input>
      </el-form-item>
      <el-form-item label="平台">
        <el-select v-model="searchForm.platformId" placeholder="平台类型" clearable>
          <el-option
                  v-for="dict in platform"
                  :key="dict.id"
                  :label="dict.platformName"
                  :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发布者">
        <el-select v-model="searchForm.publisherId" placeholder="发布者" clearable>
          <el-option
                  v-for="dict in publisherList"
                  :key="dict.id"
                  :label="dict.username"
                  :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发布状态">
        <el-select v-model="searchForm.publishStatus" placeholder="发布状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="已发布" value="1"></el-option>
          <el-option label="未发布" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findNovelInfoList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-button type="success" @click="showForm=true">新增</el-button>
    </el-row>

    <!--新增表单-->
    <el-dialog :visible.sync="showForm" width="500px" append-to-body>
      <el-form ref="form" :model="novelForm" label-width="80px" v-show="showForm">
        <el-form-item label="书名">
          <el-input v-model="novelForm.name"></el-input>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="novelForm.keyword"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="novelForm.link"></el-input>
        </el-form-item>
        <el-form-item label="平台类型" prop="type">
          <el-select v-model="novelForm.platformId" placeholder="平台类型" clearable>
            <el-option
                    v-for="dict in platform"
                    :key="dict.id"
                    :label="dict.platformName"
                    :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addNovelInfo">保存</el-button>
          <el-button @click="showForm = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--发布弹窗-->
    <el-dialog :visible.sync="showPublishForm" width="500px" append-to-body>
      <el-form ref="form" :model="publishForm" label-width="80px" v-show="showPublishForm">
        <el-form-item label="发布者">
          <el-select v-model="publishForm.publisherId" placeholder="发布者" clearable>
            <el-option
                    v-for="dict in publisherList"
                    :key="dict.id"
                    :label="dict.username"
                    :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="publishNovel">发布</el-button>
          <el-button @click="showPublishForm = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--回填列表-->
    <el-dialog :visible.sync="showBackfillTable" width="1500px" append-to-body>
      <el-table
              :data="backfillTable"
              border
              style="width: 100%">
        <el-table-column
                prop="publisherName"
                label="发布者"
                width="180">
        </el-table-column>
        <el-table-column
                prop="publishTime"
                label="发布时间"
                width="180">
        </el-table-column>

        <el-table-column
                prop="flow"
                label="流量"
                width="180">
        </el-table-column>
        <el-table-column
                prop="orderNum"
                label="订单量"
                width="180">
        </el-table-column>
        <el-table-column
                prop="description"
                label="描述"
                width="180">
        </el-table-column>
        <el-table-column
                prop="updateTime"
                label="操作"
                width="180">
          <template slot-scope="scope">
            <el-button
                    type="text"
                    @click="handleFeedback(scope.row)"
            >反馈</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--反馈弹窗-->
    <el-dialog :visible.sync="showFeedbackForm" width="500px" append-to-body>
      <el-form ref="form" :model="feedbackForm" label-width="80px" v-show="showFeedbackForm">
        <el-form-item label="流量">
          <el-input v-model="feedbackForm.flow"></el-input>
        </el-form-item>
        <el-form-item label="订单">
          <el-input v-model="feedbackForm.orderNum"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="feedbackForm.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="feedbackSubmit">反馈</el-button>
          <el-button @click="showFeedbackForm = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-table
            :data="tableData.current_data"
            border
            style="width: 100%">
      <el-table-column
              prop="name"
              label="名称"
              width="180">
      </el-table-column>
      <el-table-column
              prop="keyword"
              label="关键字"
              width="180">
      </el-table-column>
      <el-table-column
              prop="platformName"
              label="平台"
              width="120">
      </el-table-column>
      <el-table-column
              prop="link"
              label="链接"
              width="180">
      </el-table-column>
      <el-table-column
              prop="orderNum"
              label="订单数"
              width="80">
      </el-table-column>
      <el-table-column
              prop="flow"
              label="流量"
              width="100">
      </el-table-column>
      <el-table-column
              prop="publishStatus"
              label="发布状态"
              width="180">
        <template slot-scope="scope">
          <span :style="getColorStyle(scope.row.publishStatus)">
            {{ getPublishStatus(scope.row.publishStatus) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
              prop="createTime"
              label="创建时间"
              width="180">
      </el-table-column>
      <el-table-column
              prop="updateTime"
              label="更新时间"
              width="180">
      </el-table-column>
      <el-table-column
              prop="updateTime"
              label="操作"
              width="180">
        <template slot-scope="scope">
          <el-button
                  type="text"
                  @click="handlePublish(scope.row)"
          >发布</el-button>
          <el-button
                  type="text"
                  @click="handleBackfill(scope.row)"
          >回填</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="searchForm.size"
            :total="totalItems"
            layout="total, sizes, prev, pager, next, jumper"
            :prev-text="customPrevText"
            :next-text="customNextText"
            class="custom-pagination"
    ></el-pagination>
  </div>

</template>

<script>
  import {get, post} from '~/api/api';
  export default {
    data() {
      return {
        tableData: {
          current_data: null,
          total_page: null,
          total_record: null
        },
        showForm: false,
        novelForm:{
          id:null,
          name: '',
          link: '',
          platformId: null,
        },
        platform:[],
        publisherList:[],
        searchForm:{
          keywordOrNameOrLink:null,
          platformId:null,
          publisherId:null,
          publishStatus:null,
          page:1,
          size:10
        },

        totalItems:null,

        //发布弹窗相关
        showPublishForm:false,
        publishForm:{
          novelInfoId:null,
          publisherId:null
        },

        //回填相关
        showBackfillTable:false,
        backfillTable:[],
        showFeedbackForm:false,
        feedbackForm:{},
        feedbackSelectNovelId:null
      }
    },
    created() {
      this.findNovelInfoList();
      this.getPlatform();
      this.getPublisherList();
    },
    computed: {
      displayedItems() {
        // 根据分页信息，计算当前页要显示的数据
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        return this.itemList.slice(startIndex, endIndex);
      },
      customPrevText() {
        return '上一页';
      },
      customNextText() {
        return '下一页';
      },
    },
    methods:{
      /**
       * 发布状态
       */
      getPublishStatus(status) {
        const labelMap = {
          0: '未发布',
          1: '已发布'
        };
        return labelMap[status];
      },
      async findNovelInfoList(){
        try {
          const response = await get('/novel/info/v1',this.searchForm); // 调用后端接口
          console.log(response.data.data.current_data)
          this.tableData = response.data.data;
          this.totalItems = this.tableData.total_record;
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      async addNovelInfo(){
        try {
          const response = await post('/novel/info/v1',this.novelForm); // 调用后端接口
          console.log(response)
          //关闭弹窗
          this.showForm = false;
          this.findNovelInfoList();
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      async getPlatform(){
        try {
          const response = await get('/novel/info/v1/platform',{});
          this.platform = response.data.data;
          console.log(response)
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      /**
       * 获取发布者列表
       */
      async getPublisherList(){
        try {
          const response = await get('/publisher/v1',{});
          this.publisherList = response.data.data;
          console.log(response)
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      /**
       * 发布
       */
      async publishNovel(){
        try {
          const response = await post('/novel/publish/v1/publish',this.publishForm);
          console.log(response)
          this.showPublishForm = false;
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      /**
       * 打开发布弹窗
       */
      async handlePublish(row){
        try {
          console.log(row);
          this.publishForm.novelInfoId = row.id;
          this.showPublishForm = true;
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      /**
       * 打开回填列表
       */
      async handleBackfill(row){
        try {
          console.log(row);
          this.feedbackSelectNovelId = row.id;
          const response = await get('/novel/publish/v1',{'novelInfoId':row.id});
          this.backfillTable = response.data.data;
          this.showBackfillTable = true;
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      /**
       * 打开反馈弹窗
       */
      async handleFeedback(row){
        try {
          console.log(row);
          this.feedbackForm = row;
          this.showFeedbackForm = true;
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      /**
       * 反馈提交
       */
      async feedbackSubmit(){
        try {
          const response = await post('/novel/publish/v1/feedback',this.feedbackForm);

          const backfillResponse = await get('/novel/publish/v1',{'novelInfoId':this.feedbackSelectNovelId});
          this.backfillTable = backfillResponse.data.data;
          this.showFeedbackForm = false;
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      handleSizeChange(newSize) {
        this.searchForm.size = newSize;
        this.searchForm.page = 1;
        this.findNovelInfoList();
      },
      handleCurrentChange(newPage) {
        this.searchForm.page = newPage;
        this.findNovelInfoList();
      },
      getColorStyle(status) {
        const colorMap = {
          0: 'red',
          1: 'green',
        };
        const color = colorMap[status] || 'black';
        return `color: ${color}`;
      },
    }
  }
</script>

<style scoped>
  .custom-pagination {
    font-size: 20px; /* 调整分页组件的字体大小 */
    height: 60px;   /* 调整分页组件的高度 */
    /* 在这里添加其他自定义样式 */
  }
</style>